{% extends 'base.html' %}
{% block css-content %}
    <link rel="stylesheet" href="/static/jquery-confirm/jquery-confirm.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-select.css"> 
	<link href="/static/fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" /> 
    <link href="/static/datatable/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">	
	<link href="/static/datatable/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
	<link href="/static/datatable/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
	<link href="/static/datatable/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
	<link href="/static/datatable/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet"> 
	<link href="/static/datatable/datatables.net-select/css/select.dataTables.min.css" rel="stylesheet">
	<link href="/static/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/tooltips/css/tooltips.css"> 
    <link rel="stylesheet" href="/static/xterm/xterm.css"/>      
	<style type="text/css"> 
		td.details-control {
		    background: url('/static/images/details_open.png') no-repeat center center; */
		    cursor: pointer;
		}
		.pt {
			font-family: "微软雅黑","Microsoft Yahei",Arial,Helvetica,sans-serif,"宋体";
		    font-size: 13px;
			color: #515151;
		}			
		tr.shown td.details-control {
		    background: url('/static/images/details_close.png') no-repeat center center;
		} 
		#compile-editor-add {
			width: 100%;
			height: 200px;
	   }	
		#compile-editor-modf {
			width: 100%;
			height: 200px;
	   }	
        .modal-select{
            -moz-user-select:none;/*火狐*/
            -webkit-user-select:none;/*webkit浏览器*/
            -ms-user-select:none;/*IE10*/
            -khtml-user-select:none;/*早期浏览器*/
            user-select:none;
            }
          .modal-header{
            cursor:move;
          }	        	            	
	</style>	  
{% endblock %}
{% block page-content %}
        <div class="clearfix"></div>
		<div class="row">
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>用户中心<small>User Center</small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                  	<!--<div class="" role="tabpanel" data-example-id="togglable-tabs"  id="add_inventory" style="display:none;">-->
                    <div class="" role="tabpanel" data-example-id="togglable-tabs"  id="add_inventory">
                      <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#tab_content2" role="tab" id="#Inception" data-toggle="tab" aria-expanded="true"><i class="fa fa-desktop"></i> 我的资产</a>
                        </li>                       
                        <li role="presentation" class=""><a href="#tab_content1" id="#database" role="tab" data-toggle="tab" aria-expanded="false"><i class="fa fa-tasks"></i> 我的工单</a>
                        </li>
                        <li role="presentation" class=""><a href="#tab_content4" role="tab" id="#allot" data-toggle="tab" aria-expanded="false"><i class="fa fa-cogs"></i> 我的任务</a>
                        </li>                          
                        <li role="presentation" class=""><a href="#tab_content3" role="tab" id="#CustomSql" data-toggle="tab" aria-expanded="false"><i class="fa fa fa-eye"></i> 个人主页</a>
                        </li>                                                                         
                      </ul>
                      <div id="myTabContent" class="tab-content">
	                        <div role="tabpanel" class="tab-pane fade " id="tab_content1" aria-labelledby="#database">
								<div class="col-md-12 col-xs-12">
				                	<div class="row">	
				                		<div class="col-md-12 col-sm-12 col-xs-12 form-group">	
											<div class="btn-group  btn-group-sm pull-right">
						                        <button class="btn btn-default" name="orders_page_previous" type="button" value="">上一页</button>
						                        <button class="btn btn-default" name="orders_page_next" type="button" value="">下一页</button>
						                        <input type="hidden" id="currentUser" name="custId" value="{{user.id}}">
						                    </div>
					                    </div>
				                    </div>
				                    <br>
				                    <div class="row">
					                    <div class="col-md-12 col-sm-12 col-xs-12 form-group">								           
						                    <table id="ordersLists" class="table table-hover">
						                      <thead>
						                        <tr>
						                        	<th class="text-center">详情</th>
									                <th>ID</th>
									                <th>工单类型</th>
									                <th>申请人</th>
									                <th>工单主题</th>
									                <th>操作人</th>
									                <th>申请时间</th>
									                <th>执行状态</th>
									                <th>审核状态</th>	
									                <th>过期状态</th>	
									                <th>过期时间</th>			                
													<th class="text-center">操作</th>
						                        </tr>
						                      </thead>
						                      <tbody>
						                      </tbody>
						                    </table>   
					                   </div>
				                   </div>
								</div>	
						</div>							
                        <div role="tabpanel" class="tab-pane fade  active in" id="tab_content2" aria-labelledby="#Inception">
				            <div class="row">	
				                <div class="col-md-12 col-sm-12 col-xs-12 form-group">	
									<div class="btn-group  btn-group-sm pull-right">
						                <button class="btn btn-default" name="assets_page_previous" type="button" value="">上一页</button>
						                <button class="btn btn-default" name="assets_page_next" type="button" value="">下一页</button>
						            </div>
					            </div>
				            </div>   
				            <br> 
				            <div class="row">                             
								<div class="col-md-12 col-xs-12">
				                    <table id="assetsListTable" class="table table-striped table-bordered">
				                      <thead>
				                        <tr>
				                          <th class="text-center">选择</th>		                                                 
				                          <th>详情</th>
				                          <th>资产编号</th>
				                          <th>设备类型</th>
				                          <th>IP地址</th>
				                          <th>操作系统</th>
				                          <th>内核版本</th>
				                          <th>CPU</th>
				                          <th>内存(GB)</th>
				                          <th>硬盘(GB)</th>                   
				                          <th>放置机房</th>
				                          <th class="text-center">操作</th>
				                        </tr>
				                      </thead>
				                      <tbody>
				                      </tbody>
				                    </table>							
								</div>	
							</div>
                        </div> 
                         <!-- CustomSql -->
                        <div role="tabpanel" class="tab-pane fade" id="tab_content3" aria-labelledby="#CustomSql">
							<div class="col-lg-4">
								<legend>
									<i class="fa  fa-paper-plane"></i> 修改密码
								</legend>
								<form role="form" method="post" id="modf_user_passwd">	
									<div class="item form-group">
										<label><i class="fa fa-lock">密码</i></label>
										<input type="password" class="form-control" placeholder="Password" id="password" name="password" />									
									</div>
									<div class="item form-group">
										<label><i class="fa fa-retweet">密码</i></label>
										<input type="password" class="form-control" placeholder="Repeat password" id="c_password" name="c_password"/>
										<input type="hidden" id="userid" value="{{user.id}}">										
									</div>																
																																						
									<lable><button type="button" value="" class="btn btn-default" id="modf_user_pw_btn">修改</button></lable>
									<button type="reset" class="btn btn-default">撤销</button>
								</form>
							 </div>	
							 <div class="col-lg-8">		
								<legend>
									<i class="fa  fa-user"></i> 个人信息
								</legend>	
								<form id="modf_user_profile" class="main form-horizontal">
									<fieldset>										
										<div class="item form-group">
											<label class="col-sm-3 control-label"><i class="fa fa-bookmark"></i></label>
											<div class="col-sm-6">
												<input type="text" class="form-control" placeholder="中文名称" id="name" name="name" value="{{user.name}}" required/>
											</div>
										</div>		
														
										<div class="item form-group">
											<label class="col-sm-3 control-label"><i class="fa fa-envelope"></i></label>
											<div class="col-sm-6">
												<input type="email" class="form-control" placeholder="Email" id="email" name="email" value="{{user.email}}" required/>
											</div>
										</div>									
				
										<div class="item form-group">
											<label class="col-sm-3 control-label"><i class="fa fa-phone"></i></label>
											<div class="col-sm-6">
												<input type="number" class="form-control" placeholder="电话号码" id="mobile" name="mobile" value="{{user.mobile}}" required/>
											</div>
										</div>																					
											<div class="space-24"></div>
									</fieldset>
									<div class="item form-group">
										<lable class="col-sm-3 control-label"></lable>
										<div class="col-sm-6">
											<button type="button" value="{{user.id}}" class="btn btn-default" id="modf_user_profile_btn">修改</button>
											<button type="reset" class="btn btn-default">撤销</button>
										</div>
							 		</div>																	
								</form>																					 													 	
							 </div>
                        </div>
                         <!-- CustomSql -->
                        <div role="tabpanel" class="tab-pane fade" id="tab_content4" aria-labelledby="#allot">
								<div class="col-md-12 col-xs-12">
				                	<div class="row">	
				                		<div class="col-md-12 col-sm-12 col-xs-12 form-group">	
											<div class="btn-group  btn-group-sm pull-right">
						                        <button class="btn btn-default" name="tasks_page_previous" type="button" value="">上一页</button>
						                        <button class="btn btn-default" name="tasks_page_next" type="button" value="">下一页</button>
						                    </div>
					                    </div>
				                    </div>
				                    <br>
				                    <div class="row">
					                    <div class="col-md-12 col-sm-12 col-xs-12 form-group">								           
						                    <table id="tasksLists" class="table table-hover">
						                      <thead>
						                        <tr>
						                        	<th class="text-center">详情</th>
									                <th>ID</th>
									                <th>任务类型</th>									                
									                <th>任务名称</th>
									                <th>用户</th>
													<th>任务参数</th>
													<th>状态</th>
									                <th>开始时间</th>
									                <th>结束时间</th>		                
													<th class="text-center">操作</th>
						                        </tr>
						                      </thead>
						                      <tbody>
						                      </tbody>
						                    </table>   
					                   </div>
				                   </div>
								</div>					 
                        </div>                                                 
                    </div>                                  
                  </div>
                </div>
              </div>        
        </div>  
        
        <div class="modal fade bs-example-modal-webssh-info"  tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">  
          <div class="modal-dialog modal-lg" style="width:1290px;height: 600px">
            <div class="modal-content">

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myWebsshModalLabel">WebSSH</h4>
              </div>
              <div class="modal-body">
				<div id="webssh_tt"  style="width:800px;" >
				    </div>	
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="websshConnect" value=""  class="btn btn-primary">连接</button>
              </div>

            </div>
          </div>
        </div>	        
        
        <div class="modal fade bs-example-modal-info"   id="AssetsModal" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel"></h4>
              </div>
              <div class="modal-body">
				  <ul class="list-unstyled timeline" id="assets_info">
					<li>
					  <div class="block">
						<div class="tags">
						  <a href="" class="tag">
							<span>基础信息</span>
						  </a>
						</div>
						<div class="block_content">
						  <h2 class="title">
										  <a>Who Needs Sundance When You’ve Got&nbsp;Crowdfunding?</a>
									  </h2>
						  <div class="byline">
							<span>13 hours ago</span> by <a>Jane Smith</a>
						  </div>
						  <p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read&nbsp;More</a>
						  </p>
						</div>
					  </div>
					</li>
					<li>
					  <div class="block">
						<div class="tags">
						  <a href="" class="tag">
							<span>硬件信息</span>
						  </a>
						</div>
						<div class="block_content">
						  <h2 class="title">
										  <a>Who Needs Sundance When You’ve Got&nbsp;Crowdfunding?</a>
									  </h2>
						  <div class="byline">
							<span>13 hours ago</span> by <a>Jane Smith</a>
						  </div>
						  <p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read&nbsp;More</a>
						  </p>
						</div>
					  </div>
					</li>
					<li>
					  <div class="block">
						<div class="tags">
						  <a href="" class="tag">
							<span>网卡信息</span>
						  </a>
						</div>
						<div class="block_content">
						  <h2 class="title">
										  <a>Who Needs Sundance When You’ve Got&nbsp;Crowdfunding?</a>
									  </h2>
						  <div class="byline">
							<span>13 hours ago</span> by <a>Jane Smith</a>
						  </div>
						  <p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read&nbsp;More</a>
						  </p>
						</div>
					  </div>
					</li>
				  </ul>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>

            </div>
          </div>
        </div>        
            
        <div class="modal fade bs-example-modal-import" id="AssetsImportModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Excel文件批量导入资产</h4><small>模板文件(<u class="red">设备资产批量导入模板文件.xls</u>)</small>
                        
                    </div>                  
                    <form role="form" method="post" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"  enctype="multipart/form-data" action='/assets/import/' class="main form-horizontal">{% csrf_token %}
                     <div class="modal-body">
                         	<div class="form-group">
								 <label class="col-sm-2 control-label">上传文件</label>
								 <div class="col-sm-6">
								 	<input type="file" name="import_file"  placeholder="上传excel文件" required/>
								 </div>
							</div>
                         
                     <div class="modal-footer">                     
                         <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                         <button type="submit" class="btn btn-primary">导入</button>
                     </div>
                    </form>
                    </div>
                </div>
                <!-- /.modal-content -->
           </div>
           <!-- /.modal-dialog -->
       </div>             
            
        <div class="modal fade  bs-example-modal-log" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" style="width:800px;height: 600px">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="orderLogModalLabel"></h4>
                    </div>                  
                    <div class="modal-body">
					   <table id="ordersLogs" class="table table-hover">
						 <thead>
						   <tr>
	                        <th>工单ID</th>
			                <th>操作人</th>
			                <th>备注</th>
			                <th>审核状态</th>
			                <th>进度状态</th>
			                <th>操作时间</th>				                
						   </tr>
						 </thead>
						 <tbody>
						 </tbody>
					   </table> 
                         
                     <div class="modal-footer">                     
                         <!-- <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> -->
                     </div>
                </div>
                <!-- /.modal-content -->
           </div>
           <!-- /.modal-dialog -->
       </div>            
                       
{% endblock %}
{% block js-content %}
	<script src="/static/jquery-confirm/jquery-confirm.min.js"></script>
    <script src="/static/datatable/datatables.net/js/jquery.dataTables.min.js"></script>
	<script src="/static/datatable/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>	
    <script src="/static/datatable/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons/js/buttons.flash.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons/js/buttons.print.min.js"></script>	
    <script src="/static/datatable/datatables.net-select/js/dataTables.select.min.js"></script>
    <script src="/static/tooltips/js/jquery.pure.tooltips.js"></script>	
	<!-- bootstrap-daterangepicker -->
    <script src="/static/moment/min/moment.min.js"></script>
    <script src="/static/bootstrap-daterangepicker/daterangepicker.js"></script>  
    <script src="/static/js/orders/common.js"></script>
    <script src="/static/js/orders/list.js"></script>
	<script src="/static/js/account/center.js"></script>
	<script src="/static/js/account/task.js"></script>
	<script src="/static/validator/validator.js"></script>
	<script src="/static/xterm/xterm.js"></script>
  	<script src="/static/xterm/addons/fit/fit.js"></script>
 	<script src="/static/xterm/addons/fullscreen/fullscreen.js"></script> 
	<script src="/static/js/dragable/dragable.js"></script> 	
{% endblock %}